<template>
    <div class="PersonMessage">
        <!-- 头部 -->
		<Header :navActive="-1" ref="Header"/>
		<!-- 内容区域 -->
		<div class="main cl">
            <!-- banner -->
            <div class="banner"></div>
            <!-- block -->
            <div class="block w1200">
                <div class="left fl">
                    <div class="title">消息中心</div>
                    <ul>
                        <router-link tag="li" :to="{name:'PersonMessage1'}">系统通知</router-link>
                        <router-link class="active" tag="li" :to="{name:'PersonMessage'}">应聘进度通知</router-link>
                    </ul>
                </div>
                <div class="right fr">
                    <div class="list">
                        <div class="item" v-for="(item,index) in list" :key="index" @click="openDetails(item.newsType,item.id,item.objId)">
                            <div class="icon"><i class="el-icon-message-solid"></i><el-badge :is-dot='item.readFlag==0?true:false'></el-badge></div>
                            <div class="text">
                                <div class="title">{{item.title}}</div>
                                <div class="dsc">{{item.newsContent}}</div>
                                <div class="date">{{item.createTime}}</div>
                            </div>
                        </div>
                        <!-- 暂无数据 -->
                        <nodata v-if="list.length==0" />
                    </div>
                    <el-pagination background layout="prev, pager, next" hide-on-single-page :current-page="pageNo" :page-size='pageSize' :total="pageTotal" @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
        <!-- 底部 -->
		<Footer />
        <!-- 面试详情操作 -->
        <el-dialog title="面试邀请" width="800px" :visible.sync="interviewOperationFlag">
			<div class="interviewOperation">
				<div class="title">{{interviewInfo.opJob.jobName}}</div>
                <div class="money">{{interviewInfo.opJob.money}}</div>
                <div class="company">{{interviewInfo.enInfo.enName}}</div>
                <div class="info">
                    <div class="t">面试信息</div>
                    <ul>
                        <li><span>面试方式：</span>
                            <template v-if="interviewInfo.type==0">现场面试</template>
                            <template v-if="interviewInfo.type==1">视频面试</template>
                        </li>
                        <li>
                            <span>面试时间：</span>
                            <template v-if="interviewInfo.type==0">{{interviewInfo.time}}</template>
                            <template v-if="interviewInfo.type==1">{{interviewInfo.time}}至{{interviewInfo.interviewEndTime}}</template>
                        </li>
                        <li><span>面试地点：</span>{{interviewInfo.location}}</li>
                        <li><span>联系人：</span>{{interviewInfo.contactName}}</li>
                        <li><span>电话：</span>{{interviewInfo.contactPhone}}</li>
                        <li><span>备注信息：</span>{{interviewInfo.remark}}</li>
                    </ul>
                </div>
                <div class="operation">
                    <div class="btns" v-if="interviewInfo.outLineState==0">
                        <el-button type="primary" @click="acceptInview(1)">接受面试</el-button>
                        <el-button @click="acceptInview(2)">拒绝面试</el-button>
                    </div>
                    <div class="text" v-if="interviewInfo.outLineState==1">
                        <p style="line-height: 45px;">已接受面试邀请
                           <template v-if="interviewInfo.type==1 && (!interviewInfo.onLineState || interviewInfo.onLineState == 0)">
                                ，请等待会议开启
                                <!-- <el-button type="text" class="ml10" @click="openVideoView(interviewInfo.internetUrl)">点击参加</el-button> -->
                           </template>
                           <template v-if="interviewInfo.type==1 && interviewInfo.onLineState == 2">
                                ，<el-button type="text" class="ml10" @click="openVideoView(interviewInfo.internetUrl)">点击参加</el-button>
                           </template>
                           <template v-if="interviewInfo.type==1 && interviewInfo.onLineState == 1">
                                ，已结束面试
                           </template>
                        </p>
                    </div>
                    <div class="text" v-if="interviewInfo.outLineState==2">
                        <p>已拒绝面试邀请，去看看新机会吧~</p>
                    </div>
                </div>
			</div>
		</el-dialog>
        <!-- 入职邀请详情操作 -->
        <el-dialog title="入职邀请" width="800px" :visible.sync="entryOperationFlag">
			<div class="interviewOperation">
				<div class="title">{{entryInfo.opJob.jobName}}</div>
                <div class="money">{{entryInfo.opJob.money}}</div>
                <div class="company">{{entryInfo.enInfo.enName}}</div>
                <div class="info">
                    <div class="t">入职信息</div>
                    <ul>
                        <li><span>入职时间：</span>{{entryInfo.time}}</li>
                        <li><span>入职地点：</span>{{entryInfo.location}}</li>
                        <li><span>联系人：</span>{{entryInfo.contactName}}</li>
                        <li><span>电话：</span>{{entryInfo.contactPhone}}</li>
                        <li><span>备注信息：</span>{{entryInfo.remark}}</li>
                    </ul>
                </div>
                <div class="operation">
                    <div class="btns" v-if="entryInfo.acceptFlag==0">
                        <el-button type="primary" @click="acceptEntry(1)">接受入职</el-button>
                        <el-button @click="acceptEntry(2)">拒绝入职</el-button>
                    </div>
                    <div class="text" v-if="entryInfo.acceptFlag==1">
                        <p>已接受入职邀请，记得准时入职哦~</p>
                    </div>
                    <div class="text" v-if="entryInfo.acceptFlag==2">
                        <p>已拒绝入职邀请，去看看新机会吧~</p>
                    </div>
                </div>
			</div>
		</el-dialog>
    </div>
</template>

<script>
    import {messageList,newsDetails,interviewDetails,entryDetails,acceptInview,acceptEntry,} from '@/api/api'
    import Header from '@/components/Header.vue'
    import Footer from '@/components/Footer.vue'
    import nodata from '@/components/nodata.vue'
    export default {
        //组件注入
        components: {Header,Footer,nodata},
        inject:['reload'],
        //存放数据
        data() {
            return {
                pageNo:1,//当前页码
                pageSize:4,//单页个数
                pageTotal:1,//总数
                list:[],
                interviewOperationFlag:false,//面试操作弹出
                entryOperationFlag:false,//入职操作弹出
                interviewInfo:{
                    opJob:{
                        jobName:'',
                        minMoney:'',
                        maxMoney:''
                    },
                    enInfo:{
                        enName:''
                    }
                },
                entryInfo:{
                    opJob:{
                        jobName:'',
                        minMoney:'',
                        maxMoney:''
                    },
                    enInfo:{
                        enName:''
                    }
                },
            }
        },
        //接受父组件传递的值
        props:[],
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            openVideoView(url){
                if(url){
                    window.open(url)
                }else{
                     this.$message.error("还未到面试时间");
                }
            },
            //切换页码
            handleCurrentChange(pageNo){
                this.pageNo = pageNo
                this.list = []
                this.getList();
            },
            //获取列表
            getList(){
                messageList({
                    'pageNo':this.pageNo,
                    'pageSize':this.pageSize,
                }).then(res =>{
                    if(res.code==200){
                        this.pageTotal = res.result.total
                        this.list = res.result.records
                    }
                });
            },
            //打开详情
            openDetails(openType,id,objId){
                console.log(openType)
                this.newsDetails(id)
                for(let i in this.list){
                    if(this.list[i].id==id){
                        this.list[i].readFlag = 1
                    }
                }
                if (openType == 14) {
                    //面试详情
                    interviewDetails({
                        'id': objId,
                    }).then(res =>{
                        if(res.code==200){
                            this.interviewInfo = res.result
                            this.interviewInfo.opJob.money = this.interviewInfo.opJob.minMoney/1000 +'K-'+ this.interviewInfo.opJob.maxMoney/1000 + 'K'
                            this.interviewOperationFlag = true
                        }
                    });
                } else if(openType==1){
                    //面试详情
                    interviewDetails({
                        'id': objId,
                    }).then(res =>{
                        if(res.code==200){
                            this.interviewInfo = res.result
                            this.interviewInfo.opJob.money = this.interviewInfo.opJob.minMoney/1000 +'K-'+ this.interviewInfo.opJob.maxMoney/1000 + 'K'
                            this.interviewOperationFlag = true
                        }
                    });
                }else if(openType==2){
                    //入职邀请详情
                    entryDetails({
                        'id': objId,
                    }).then(res =>{
                        if(res.code==200){
                            this.entryInfo = res.result
                            this.entryInfo.opJob.money = this.entryInfo.opJob.minMoney/1000 +'K-'+ this.entryInfo.opJob.maxMoney/1000 + 'K'
                            this.entryOperationFlag = true
                        }
                    });
                }else{
                    //this.reload()
                }
            },
            //接受或拒绝面试
            acceptInview(type){
                if(type==1){
                    acceptInview({
                        'inviewId': this.interviewInfo.id,
                        'state': type,
                    }).then(res =>{
                        if(res.code==200){
                            this.$message.success('操作成功');
                            this.interviewOperationFlag = false
                        }else{
                            this.$message.error(res.message);
                        }
                    });	
                }else if(type==2){
                    this.$confirm('确认拒绝面试吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        acceptInview({
                            'inviewId': this.interviewInfo.id,
                            'state': type,
                        }).then(res =>{
                            if(res.code==200){
                                this.$message.success('操作成功');
                                this.interviewOperationFlag = false
                            }else{
                                this.$message.error(res.message);
                            }
                        });	
                    })
                }
            },
            //接受或拒绝入职
            acceptEntry(type){
                if(type==1){
                    acceptEntry({
                        'entryId': this.entryInfo.id,
                        'state': type,
                    }).then(res =>{
                        if(res.code==200){
                            this.$message.success('操作成功');
                            this.entryOperationFlag = false
                        }else{
                            this.$message.error(res.message);
                        }
                    });	
                }else if(type==2){
                    this.$confirm('确认拒绝入职吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        acceptEntry({
                            'entryId': this.entryInfo.id,
                            'state': type,
                        }).then(res =>{
                            if(res.code==200){
                                this.$message.success('操作成功');
                                this.entryOperationFlag = false
                            }else{
                                this.$message.error(res.message);
                            }
                        });	
                    })
                }
            },
            //消息详情
            newsDetails(id){
                newsDetails({
                    'id': id,
                }).then(res =>{
                    if(res.code==200){
                       
                    }
                });
            },
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {},
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            //判断登录状态
            this.userLoginFlag()
            //获得列表
            this.getList()
        }
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .PersonMessage{background: #f6f6f6;
        .main{min-height: 500px;
            .banner{width: 100%;height: 120px;background: url('../../assets/person-bg.jpg') center no-repeat;background-size: cover;}
            .block{height: auto;overflow: hidden;margin-top: 30px;padding-bottom: 60px;
                .left{width: 270px;height: auto;overflow: hidden;background: #fff;padding-bottom: 25px;
                    .title{font-size: 18px;color: #333;font-weight: bold;padding: 25px 0;text-align: center;}
                    ul{height: auto;overflow: hidden;
                        li{line-height: 50px;font-size: 16px;color: #999;text-align: center;cursor: pointer;border-top: 1px solid #f6f6f6;position: relative;@include transition();
                            &.active{color: #E54437;
                                &:after{content: "";width: 4px;height: 50px;background: #E54437;position: absolute;left: 0;top: 0;}
                            }
                            &:hover{color: #E54437;}
                        }
                    }
                }
                .right{width: 900px;height: auto;overflow: hidden;
                    .list{height: auto;overflow: hidden;background: #fff;padding: 40px 50px;
                        .item{height: auto;border-bottom: 1px solid #eee;padding-bottom: 20px;margin-bottom: 20px;cursor: pointer;
                            .icon{width: 50px;height: 50px;line-height: 58px;border-radius: 50%;background: #DCB456;float: left;text-align: center;position: relative;margin-right: 20px;
                                i{font-size: 24px;color: #fff;}
                                .el-badge{position: absolute;right: 2px;top: 0;line-height: normal;}
                            }
                            .text{height: auto;overflow: hidden;
                                .title{font-size: 16px;color: #333;}
                                .dsc{font-size: 14px;color: #999;line-height: 24px;margin-top: 12px}
                                .date{font-size: 14px;color: #999;margin-top: 12px}
                            }
                            &:last-child{border: 0;padding: 0;margin: 0;}
                        }
                    }
                }
            }
        }
        .interviewOperation{height: auto;overflow: hidden;
            .title{font-size: 16px;color: #333;font-weight: bold;}
            .money{font-size: 20px;color: #E72618;margin: 10px 0;}
            .company{font-size: 14px;color: #999;border-bottom: 1px solid #eee;padding-bottom: 20px;margin-bottom: 20px;}
            .info{height: auto;overflow: hidden;border-bottom: 1px solid #eee;padding-bottom: 20px;
                .t{font-size: 14px;color: #333;font-weight: bold;}
                ul{height: auto;overflow: hidden;
                    li{height: auto;overflow: hidden;margin-top: 10px;
                        span{font-size: 14px;color: #999;}
                    }
                }
            }
            .operation{height: auto;overflow: hidden;
                .btns{height: auto;overflow: hidden;text-align: center;margin-top: 20px;
                    .el-button{margin: 0 10px;}
                }
                .text{font-size: 14px;color: #666;padding: 30px 0 10px;text-align: center;}
            }
        }
    }
</style>